<template>
	<view class="tabbar-shop flex">
		<view class="tabbar-shop-item" v-for="(v,i) in tabbar" :key="i" :class="{'ac':active===i}"
			@click="tapTabbar(v,i)">
			<text :class="['iconfont','icon-'+v.icon]" />
			<view>
				{{v.text}}
			</view>
			<view class="iconNum" v-if="v.num>0">
				{{v.num}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ["shopId"],
		data() {
			return {
				tabbar: [{
						text: "商品",
						icon: "shangpin",
						component: "select_goods"
					},
					{
						text: "订单",
						icon: "dingdan",
						component: "order"
					},
					{
						text: "店铺",
						icon: "dianpufill",
						component: "store"
					},
					{
						text: "消息",
						icon: "shouye",
						component: "info",
						num: 0
					},
					{
						text: "我的",
						icon: "wode-wode",
						component: "user"
					},
				],
				active: 0
			};
		},
		computed: {},
		created() {
			let i = this.$api.storeActive;
			if (i) {
				this.active = i;
				this.$emit("tapTabbar", this.tabbar[i].component);
			};
			this.infoNum();
		},
		methods: {
			tapTabbar(v, i) {
				if (this.active != i) {
					this.active = i;
					this.$api.storeActive = i;
					this.$emit("tapTabbar", v.component);
				};
			},
			infoNum(){
				// 卖家的未读消息数
				this.$api.request('notice', 'selectUnreadCountByShopId', {
					shopId: this.shopId
				}).then(res => {
					// console.log(4, res)
					this.tabbar[3].num = res.data.unreadCount;
				});
			}
		}
	}
</script>

<style lang="scss">
	.tabbar-shop {
		border-top: 1px solid #d0d2d8;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 120upx;
		background: #fff;
		color: #A3A5AA;

		.tabbar-shop-item {
			font-size: 28upx;
			text-align: center;
			position: relative;

			.iconfont {
				font-size: 50upx;
			}

			.iconNum {
				top: -16upx;
				right: -16upx;
			}
		}

		.ac {
			color: $a-color;
		}
	}
</style>
